<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>门禁管理管理-详情</title>
<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/index_team.css">
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/plugin/layui/layui.js"></script>
</head>
<style>
p{height:40px;line-height:40px}
.p-title{display: inline-block;width: 75px; margin-right: 10px;color: #666;font-size: 16px;}
.p-content{color: #666;font-size: 16px;}
.m-margin{margin: 20px 20px 0 20px;}
.kb-content { width: 1136px;padding-top: 0px;}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
    cursor: pointer;
}
::-webkit-scrollbar-thumb {
    background-color: #a2a2a2;
    border-radius: 2px;
}

body{
	height: auto;
}
</style>
<script type="text/javascript" th:inline="javascript">
	function addPermission(){
		var projectId = parent.parent.$("#projectId").val();
		var doorId = $("#doorId").val();
		console.log(doorId);
		parent.parent.layer.open({
			  type: 2, 
			  title:"添加门禁权限",
			  area: ['700px','50%'],
		      shade: [0.6, '#010101'],
		      zIndex:800,
			  content:"/app/customerdoorMap/add/"+projectId+"/"+doorId , 
			  end: function () {
				  table.reload('staff');
				  tableBtnOpt();
		      }
		
		});
	}
	
</script>

<body>
	<div class="layui-form" lay-filter="c">
		<section class="clearfix">
			<header class="nav-header">
				<h2 class="nav-section-header-title">
					<span th:text="${record.name}"></span>
				</h2>
			</header>
			<div class="m-margin">
				<header class="nav-header">
					<h2 class="nav-section-header-title">
						<span>门禁信息</span>
					</h2>
				</header>
				<div style="margin: 20px 20px 0 30px;">
					<input type="hidden" id="doorId" th:value="${record.id}"/>
					<p><span class="p-title">门禁名称:</span><span th:text="${record.name}"></span></p>
					<p><span class="p-title">设备ID:</span><span id="deviceId" th:text="${record.deviceId}"></span></p>
					<p><span class="p-title">是否联网:</span><span th:if="${record.networking} == 'true'">联网</span><span th:if="${record.networking} == 'false'">不联网</span></p>
					<p><span class="p-title">联网类型:</span><span th:text="${record.networkType}"></span></p>
					<p><span class="p-title">备注:</span><span th:text="${record.notes}"></span></p>
				</div>
			</div>
			<div class="m-margin">
				<header class="nav-header">
					<h2 class="nav-section-header-title">
						<span>会员列表</span>
					</h2>
					<div class="f-right" style="margin-top: -35px;">
						<button class="layui-btn layui-btn-radius layui-btn-normal f-right" id="add_user" onclick="addPermission()">
							<i class="layui-icon"></i>添加会员
						</button>
					</div>
				</header>
				<div class="layui-tab-content " id="teamList">
					<table class="layui-hide" id="LAY_table_staff" lay-filter="staff-filter"></table>
				</div>
			</div>
			<div class="m-margin">
				<header class="nav-header">
					<h2 class="nav-section-header-title">
						<span>开门记录</span>
					</h2>
				</header>
				<div class="layui-tab-content " id="teamList">
					<table class="layui-hide" id="LAY_table_inout" lay-filter="inout"></table> 
				</div>
				<script id="headerPic" type="text/html">
  					<span class="dotted" style="background:#da6068">{{d.userName.substr(0,1)}}</span>
				</script><!--  -->
				<script id="Bar" type="text/html">
  					<a  onmouseenter=tipHover(this,"修改") onmouseleave=closeAll() onclick="edit('{{d.id}}',event)"	data-id="{{d.staffId}}"><i class="layui-icon icon-settings">&#xe642;</i></a>
					<a  onmouseenter=tipHover(this,"删除") onmouseleave=closeAll() onclick="del('{{d.id}}',event)"  data-id="{{d.staffId}}"><i class="layui-icon icon-settings">&#xe640;</i></a>				
				</script>
			</div>
		</section>
	</div>
	<script type="text/javascript">
		var table;
		var projectId;
		//setHeight();
		$(function(){
			//setHeight();
			projectId=parent.parent.$("#projectId").val();
			layui.use(['element','layer','form','table'], function(){
				var form = layui.form;
				table = layui.table;
				//方法级渲染 会员列表
				table.render({
					id:'staff',
				    elem: '#LAY_table_staff',
				    url: '/app/customerdoorMap/listdata',
				    cols: [[
				      {field:'name',align:'left', title: '会员',width:'20%',templet:function(d){return d.staff.name}}
				      ,{field:'staffId', align:'center', title: '团队',width:'20%',templet:function(d){return d.staff.fkTeam}}
				      ,{field: 'startDay', align:'center',title: '开始时间',width:'20%',templet:function(d){return d.startDay+" "+d.startTime}}
				      ,{field: 'endDay', align:'center',title: '结束时间',width:'20%',templet:function(d){return d.endDay+" "+d.endTime}}
				      ,{field:'enabledState', align:'center',width:'15%',toolbar: '#Bar' }
				    ]]
				    ,page: true
				    ,done:function(res, curr, count){
					    $(".layui-table-body table.layui-table td").css("cursor","pointer");
					    setHeight()
					  }
				    ,where: {
			        	params:{
			        		
			        	}
			        }
				});
				//开门记录
				table.render({
					id:'inout',
				    elem: '#LAY_table_inout',
				    url: '/system/org/user/listdata',
				    cols: [[
				      {field:'userid',align:'left', title: '会员',width:'20%'}
				      ,{field:'userName', align:'center', title: '团队',width:'20%'}
				      ,{field: 'sortNumber', align:'center',title: '开始时间',width:'20%'}
				      ,{field: 'right', align:'center',title: '结束时间',width:'20%'}
				      ,{field:'enabledState', align:'center',width:'20%',toolbar: '#Bar' }
				    ]]
				    ,page: true
				    ,where: {
			        	params:{
			        		
			        	}
			        },
			        done:function(){
			        	 setHeight()
			        }
				});
				tableBtnOpt();
				
			})
		})
		function edit(id,event){
			preventBubble(event);//阻止事件冒泡即可，点击tr的
			parent.layer.open({
				title : [ '编辑员工信息'],
				type : 2,
				area : ['700px','50%'],
				shade : [0.6, '#010101'],
				content : [ "/app/customerdoorMap/edit/"+id+"/"+projectId, 'no' ],
				end: function () {
					table.reload('staff');
					tableBtnOpt();
			      }
			});
		}
		
		function del(id,event){
			preventBubble(event);//阻止事件冒泡即可，点击tr的
			parent.layer.confirm('确认要删除吗，删除后不能恢复', function(index){
		    	//发送删除请求
		    	$.post("/app/customerdoorMap/delete",{id:id},function(res){
		    		if(res.success){
		    			parent.layer.msg(res.msg);
		    		}else{
		    			parent.layer.msg(res.msg);
		    		}
		    		parent.layer.close(index);
		    		table.reload('staff');
		    		tableBtnOpt();
		        },"json");
		  	});	
		}
		function tipHover(target,txt){
			var index=layer.tips(txt,target, {
				  tips: [1, '#000'],
				  area: ['auto', 'auto'],
				  time: 0,
				  tipsMore: true
			});
			return index;
		}
		function closeAll(){
			layer.closeAll();
		}
		
		/* 阻止事件冒泡 */
		function preventBubble(event){ //取消事件冒泡
			  var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
			  if (e && e.stopPropagation) {  
			    e.stopPropagation();  
			  } else if (event) {  
			    event.cancelBubble = true;  
			  }  
		}
		function tableBtnOpt(){
			var $mylist = $("#LAY_table_staff").next('.layui-table-view').find('.layui-table-body table.layui-table');
			/*  点击tr元素,跳转详情基于table*/
			  $mylist.on("click",'tr',function(){
					var targetI=$(this);
					//$(this).parent().find("i[isShow='fou']")
					var id=$(targetI).children('td').find("a[data-id]").attr("data-id");
					parent.location.href  = '/app/customerStaff/details/'+id;
					return false;
			  });
		}
		function setHeight(){
		    var h = document.body.offsetHeight;
		    window.parent.parentHeight(h);
		}
	</script>
</body>
</html>